<template>
  <h1>reactive只能用来创建对象类型的响应式数据</h1>
  <p>{{name}}--{{age}}--{{sex}}</p>
  <button @click="changePerson">修改person</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
/* 
  - 如果直接解构代理对象,得到变量,则直接失去响应式能力
  - 如果想要解构代理对象的属性,并且还要保证响应能力存在,则需要使用toRefs的方法
  - 从toRefs解构出来的数据其实是ref对象,所以修改的时候要添加.value
*/
  import {reactive , toRefs} from "vue"

  //reactive创建的是一个代理对象
  const person = reactive({
    name: "老王",
    age: 20,
    sex: "女"
  })
  // let {name , age , sex} = person
  let {name , age , sex} = toRefs(person)
  console.log(name , age , sex);
  const changePerson = () => {
    name.value = "111"
  }
  

</script>